<script setup>
  import { reactive, ref, watch } from 'vue'
  
  import { usePowerOps, useTeamOps } from '@/hooks';
  const powerOptions = usePowerOps();
  const teamOptions = useTeamOps();

  const props = defineProps({dialogFormVisible:{}, token:{}, rowData:{}})
  const emits = defineEmits(["isShow"])

  const dFVisible = ref(props.dialogFormVisible);
  const userData = reactive({password:"******"});

  watch(()=>props.dialogFormVisible, (val)=>{
    dFVisible.value = val;
  })

  watch(props.rowData, (val)=>{
    userData.uId = val.uId;
    userData.tId = val.tId;
    userData.uName = val.uName;
    userData.power = val.power;
  })

  // 关闭按钮
  function cancel(){
    dFVisible.value = false;
    emits("isShow", false);
  }
  // 提交按钮
  function submit(){
    dFVisible.value = false;
    emits("isShow", false);
    emits("getNewData", userData);
  }
  // 点击空白，点击右上角x，按键盘esc键
  function close(){
    emits("isShow", false);
  }


</script>
<template>
    <el-dialog v-model="dFVisible" title="Shipping address" :before-close="close">
      <el-form :model="userData">
        <el-form-item label="姓名">
          <el-input v-model="userData.uName"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userData.password"/>
        </el-form-item>
        <el-form-item label="部门">
          <el-select-v2
            v-model="userData.tId"
            :options="teamOptions"
          />
        </el-form-item>
        <el-form-item label="职位">
          <el-select-v2
            v-model="userData.power"
            :options="powerOptions"
          />
        </el-form-item>
        <p>要修改的原信息：{{ userData }}</p>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>

  <style scoped>
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  </style>
  